<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>handsontable实现类似网页excel预览</title>
    <script src="js/handsontable.full.js"></script>
    <link rel="stylesheet" href="css/handsontable.full.css">
</head>
<body>
<div class="ibox-content" id="ex"></div>
<script>
    var data = [
        {riqi: '2019-06-07', address: '北京', goods: '冰箱', price: '3399', sales: 530},
        {riqi: '2019-06-07', address: '天津', goods: '空调', price: '4299', sales: 522},
        {riqi: '2019-06-07', address: '上海', goods: '洗衣机', price: '1299', sales: 544},
        {riqi: '2019-06-07', address: '广州', goods: '彩电', price: '4599', sales: 562},
        {riqi: '2019-06-07', address: '深圳', goods: '热水器', price: '1099', sales: 430},
        {riqi: '2019-06-07', address: '重庆', goods: '笔记本电脑', price: '4999', sales: 666},
        {riqi: '2019-06-07', address: '厦门', goods: '油烟机', price: '2899', sales: 438}
    ];

    var data2 = [{
        "序号": 1,
        "部门": "总经办",
        "姓名": "孙召阳",
        "性别": "男",
        "篮球": "",
        "羽毛球": "",
        "游泳": "",
        "器械健身": "举手",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 2,
        "部门": "总经办",
        "姓名": "张小燕",
        "性别": "女",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "",
        "器械健身": "举手",
        "乒乓球": "",
        "意向时间": "周六",
        "其他建议": ""
    }, {
        "序号": 3,
        "部门": "采购部",
        "姓名": "兰小华",
        "性别": "男",
        "篮球": "",
        "羽毛球": "",
        "游泳": "举手",
        "器械健身": "举手",
        "乒乓球": "",
        "意向时间": "周六",
        "其他建议": ""
    }, {
        "序号": 4,
        "部门": "采购部",
        "姓名": "何伟",
        "性别": "男",
        "篮球": "举手",
        "羽毛球": "举手",
        "游泳": "举手",
        "器械健身": "举手",
        "乒乓球": "",
        "意向时间": "周六",
        "其他建议": ""
    }, {
        "序号": 5,
        "部门": "策划部",
        "姓名": "余江",
        "性别": "男",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "",
        "器械健身": "举手",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 6,
        "部门": "",
        "姓名": "罗菊",
        "性别": "女",
        "篮球": "",
        "羽毛球": "",
        "游泳": "举手",
        "器械健身": "举手",
        "乒乓球": "举手",
        "意向时间": "周六",
        "其他建议": ""
    }, {
        "序号": 7,
        "部门": "",
        "姓名": "夏浩",
        "性别": "男",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "举手",
        "器械健身": "",
        "乒乓球": "举手",
        "意向时间": "周一晚上",
        "其他建议": ""
    }, {
        "序号": 8,
        "部门": "设计部",
        "姓名": "姚婷婷",
        "性别": "女",
        "篮球": "",
        "羽毛球": "",
        "游泳": "",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 9,
        "部门": "",
        "姓名": "石文华",
        "性别": "女",
        "篮球": "",
        "羽毛球": "",
        "游泳": "",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 10,
        "部门": "",
        "姓名": "杨懿",
        "性别": "女",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "举手",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 11,
        "部门": "",
        "姓名": "邓江凌",
        "性别": "男",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "举手",
        "器械健身": "",
        "乒乓球": "举手",
        "意向时间": "周六",
        "其他建议": ""
    }, {
        "序号": 12,
        "部门": "",
        "姓名": "王跃",
        "性别": "男",
        "篮球": "",
        "羽毛球": "",
        "游泳": "",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 13,
        "部门": "媒介部",
        "姓名": "洪成秀",
        "性别": "女",
        "篮球": "",
        "羽毛球": "",
        "游泳": "",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 14,
        "部门": "",
        "姓名": "梁鑫",
        "性别": "女",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "",
        "器械健身": "举手",
        "乒乓球": "",
        "意向时间": "周六",
        "其他建议": ""
    }, {
        "序号": 15,
        "部门": "",
        "姓名": "向娜",
        "性别": "女",
        "篮球": "",
        "羽毛球": "",
        "游泳": "",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 16,
        "部门": "电销部",
        "姓名": "谢军",
        "性别": "男",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "",
        "器械健身": "",
        "乒乓球": "举手",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 17,
        "部门": "",
        "姓名": "何燕",
        "性别": "女",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "举手",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 18,
        "部门": "",
        "姓名": "翟丽君",
        "性别": "女",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "",
        "器械健身": "举手",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 19,
        "部门": "",
        "姓名": "唐帅",
        "性别": "男",
        "篮球": "",
        "羽毛球": "",
        "游泳": "",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 20,
        "部门": "",
        "姓名": "黄翠莲",
        "性别": "女",
        "篮球": "",
        "羽毛球": "",
        "游泳": "",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 21,
        "部门": "",
        "姓名": "李山树",
        "性别": "男",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "",
        "器械健身": "举手",
        "乒乓球": "举手",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 22,
        "部门": "",
        "姓名": "何宁英",
        "性别": "女",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "",
        "器械健身": "举手",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 23,
        "部门": "",
        "姓名": "张慕兰",
        "性别": "女",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "",
        "器械健身": "举手",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }, {
        "序号": 24,
        "部门": "物流部",
        "姓名": "袁小慧",
        "性别": "女",
        "篮球": "",
        "羽毛球": "举手",
        "游泳": "",
        "器械健身": "",
        "乒乓球": "",
        "意向时间": "",
        "其他建议": ""
    }];

    /*//数据格式是这样的：
    var jsonData = JSON.stringify(data2).replace(/\"/g, "");  //这里去掉所有"
    console.log("---"+jsonData);
    // 下边操作
    //  :替换:"
    //  ,替换",
    //  }]替换"}]
    //  }",{替换 "},{
    jsonData = jsonData.replace(/\:/g,"\:\"").replace(/\,/g,"\"\,").replace(/\}\]/g,"\"\}\]").replace(/\}\"\,\{/g,"\"\}\,\{");
    console.log("++++"+jsonData);
    //最后转回json对象
    data2 = eval('(' + jsonData + ')');
    console.log(data2);*/
    function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        /*if (prop == 'address') {
            //修改字体颜色
            td.style.color = '#32CD32';
            //如果要添加其他样式，可以用以下写法
            //td.style = 'font-weight: bold;';
        } else if (prop == 'price') {
            //格式化价格数据
            td.innerText = value != null ? numbro(value).format('0.00') : "";
        } else if (prop == 'sales') {
            //右对齐
            td.style.textAlign = 'right';
            td.innerText = value != null ? numbro(value).format('0,0.00') : "";
        }*/
    }

    Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

    var hot = new Handsontable(document.getElementById('ex'), {
        data: data,
        rowHeaders: true,
        colWidths: 150, // 设置所有列宽为150像素
        filters: true,
        columnSorting: true,
        sortIndicator: true,
        autoColumnSize: true,
        manualColumnResize: true,
        undo: true,
        redo: true,
        wordWrap: true,
        copyable: true,
        mergeCells: false,
        manualRowResize: true,
        manualRowMove: true,
        manualColumnMove: false,
        renderAllRows: true,
        allowInsertRow: true,
        allowInsertColumn: false,
        fixedColumnsLeft: 1,
        /*  columns: [{
              data: 'riqi',
              type: 'date',
              dateFormat: 'YYYY-MM-DD'
          }, {
              data: 'address',
              type: 'text'
          }, {
              data: 'goods',
              type: 'text'
          }, {
              data: 'price',
              type: 'numeric'
          }, {
              data: 'sales',
              type: 'numeric'
          }],*/
        contextMenu: ['row_above', 'row_below', '---------', 'remove_row', '---------', 'undo', 'redo', '---------', 'make_read_only', '---------', 'alignment'],
        dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
        cells: function (row, col, prop) {
            var cellProperties = {};
            cellProperties.renderer = "negativeValueRenderer";
            return cellProperties;
        },
    });
</script>
</body>
</html>